<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>js_10</title>

		<script type="text/javascript">
			/**
			 * 新创建一个元素节点，并把该节点添加为文档中指定节点的子节点
			 */
			window.onload = function() {
				//1.document.createElement("标签名字");
				//新创建一个元素节点，返回值为指向元素节点的引用
				//<li></li>
				var liNode = document.createElement("li");
				
				//2.创建“厦门”的文本节点
				//document.createTextNode(string) 创建一个文本节点
				//参数为文本值，返回改文本节点的引用
				var xmText=document.createTextNode("厦门");
				//<li>厦门</li>
				liNode.appendChild(xmText);
				
				var cityNode=document.getElementById("city");
				//2.elementNode.appendChild(newChild);为elementNode
				//新添加newChild子节点，该字节点作为elementNode的最后一个子节点
				cityNode.appendChild(liNode);
			}
		</script>

	</head>

	<body>
		<p>你喜欢哪个城市？</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		<br/><br/>
		<p>你喜欢哪款单机游戏</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		<br /><br /> gender:
		<input type="radio" name="gender" id="gender" value="male" />Male
		<input type="radio" name="gender" id="gender" value="female" />Female

		<br/><br/> name:
		<input type="text" name="username" id="name" value="idea" />
	</body>

</html>